昨天了解了Hook的概觀之後，今天要利用Hook的規則打造一個客製化的Hook。
以下用React官網的範例，模擬一個判斷是有訂閱的人否在線的Component，如果他有上線且取消訂閱時，一並清除他的上線狀態。

//引用Hook中的useState、useEffect
import React, { useState, useEffect } from 'react';

//客製化Hook useFriendStatus，根據接收到的friendID回傳訂閱者上線狀態
function useFriendStatus(friendID) {
//useState:回傳值更新isOnline和setIsOnline
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }
//根據friendID、handleStatusChange的值執行API
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

將上線狀態當作變數，分別使用在有需要的Component上面。

//訂閱者狀態
function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}
//根據訂閱狀態顯示訂閱者姓名
function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

每一次呼叫一個 Hook 都可以取得一個完全獨立的state，可以根據不同的Component去重複使用。
客製化Component在命名上會以use作為開頭，不僅可以方便其他專案合作人員理解它是一個客製化Hook，日後在管理維護時也比較方便。